<template>
  <div>
    <div
      class="text-666 flex justify-between pb-12 head align-center"
      style="border-bottom: 1px solid #ddd"
    >
      <div class="flex gc-4 align-center">
        <button class="create linear-gradient core-button" @click="create">
          新建网页
        </button>
        <div class="flex align-center core-button create-folder">
          <img :src="folder" width="18" />
          <button class="px-0" @click="createSubFolder"> 新建文件夹 </button>
        </div>
        <button
          v-if="selectedKey.size === 1"
          class="open core-button"
          @click="open()"
        >
          打开
        </button>
        <div
          v-if="selectedKey.size === 1"
          class="icon-button"
          @click="editItem"
        >
          <button class="w-100 h-100 flex flex-s">
            <img :src="edit" width="18" />
          </button>
        </div>
      </div>

      <button
        :disabled="selectedKey.size === 0"
        class="core-button delete"
        @click="deleteItem"
      >
        删除
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { activeId, currentFolder } from '@/views/bus';
  import edit from '@/assets/images/edit.png';
  import folder from '@/assets/images/folder.png';
  import {
    newConfig,
    resetConfig,
    createAndEdit,
  } from '@/views/components/create/bus';
  import { findById } from '@/store/program/utils';
  import { notify } from '@/views/components/notify/bus';
  import { nanoid } from 'nanoid';
  import { formatDate } from '@/utils/utils';
  import { selectedKey, open, createSubFolder } from '../bus';

  const deleteItem = () => {
    notify({
      title: '警告',
      msg: `你将会删除${selectedKey.value.size}项`,
      onComfirm() {
        currentFolder.value.children = currentFolder.value.children?.filter(
          (e) => {
            return !Array.from(selectedKey.value).includes(e.id);
          }
        );
        selectedKey.value.clear();
      },
    });
  };
  const editItem = () => {
    const target = findById(Array.from(selectedKey.value)[0]);
    if (target && target.type === 'file') {
      newConfig.value = target;
      createAndEdit();
    }
  };

  const create = () => {
    resetConfig();
    createAndEdit();
  };
</script>

<style lang="scss" scoped>
  .head {
    padding: 12px;
    background-color: #f8f8f8;
    height: 54px;
  }
  button.delete {
    color: var(--pink);
    border: 1px solid var(--pink);
    height: 24px;
    &:hover {
      background-color: var(--pink);
      color: white;
    }
  }

  .create-folder {
    &:hover {
      background-color: #eee;
    }
  }
  .open {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--blue);
    color: var(--blue);
  }
  .desc {
    background-color: #eee;
  }

  button.confirm {
    background-color: orange;
  }
  .actions {
    padding: 8px;
  }
  .icon-button {
    height: 28px;
    width: fit-content;
    padding: 0 12px;
  }
</style>
